<script type="text/javascript">
	temp_meta={}
	
	var common={
		props:{
			kw:{
				coerce:function (kw){
					if(!kw)return kw

					var this_temp_meta=temp_meta[kw.temp]
					//var default_kw = temp_meta[kw.temp]
					if(this_temp_meta && this_temp_meta.justify){
						return temp_meta[kw.temp].justify(kw)
					}else{
						return kw
					}
				}
			},
		},
		methods:{
			focus:function () {
				var data={
					dom:this.$el,
					child_kw:this.kw,
				}
				this.$dispatch('focus',data)
			},
		},
		watch:{
			'kw.toggle':function () {
				this.focus()
			}
		},
		
	}
	temp_meta['com-contain']={
		kw:{
			istyle:{
				width:'100%',
				height:'100px',
				backgroundColor:'grey',
				margin:'auto',
				},
			edit_temp:'edit-contain',
			temp:'com-contain',
			childs:[],
			toggle:false,
		},
		justify:function (kw) {
			
			if(!kw.istyle){
				Vue.set(kw,'istyle',{})
			}
			if(!kw.childs){
				Vue.set(kw,'childs',[])
			}
			var default_style=this.kw.istyle
			for(var x in default_style){
				if(!kw.istyle[x]){
					Vue.set(kw.istyle,x, default_style[x])
				}
			}
			Vue.set(kw,'toggle',true)
			//if(!kw.temp){
			//	kw.temp=this.temp
			//}
			if(!kw.edit_temp){
				Vue.set(kw,'edit_temp',this.kw.edit_temp)
			}
			return kw
		}
}

	Vue.component('comContain',{
		template:'#com-contain',
		mixins:[common],
		//props:['kw'],
		//data:function () {
		//	return {
		//		default_style:{
		//				width:'100%',
		//				height:'100px',
		//				backgroundColor:'grey',
		//				margin:'auto',
		//			},
		//		edit_temp:'edit-contain',
		//		temp:'com-contain',
		//	}
		//},

		methods:{

			//add_element:function (kw) {
			//	//var kw = {
			//	//		istyle:{
			//	//		width:'100%',
			//	//		height:'100px',
			//	//		backgroundColor:'grey',
			//	//		},
			//	//	edit_temp:'edit-contain',
			//	//	temp:'com-contain',
			//	//	childs:[],
			//	//}
			//	this.kw.childs.push(kw)
			//	//this.content='com-contain'
			//},
			detach:function () {
				this.$parent.content='blank'
			}
		},
		components:{
			blank:{
				template:'<div></div>'
			}
		}
	})

	Vue.component('editContain',{
		template:'#edit-contain',
		props:['kw'],
		data:function () {
			return {
				istyle:JSON.stringify(this.kw.istyle),
				
			}
		},
		methods:{
			save:function () {
				var obj =JSON.parse(this.istyle)
				//Vue.set(this.kw,'istyle',obj)
				update_vue_obj(this.kw.istyle,obj)
			},
			
		},
		watch:{
			'kw.istyle':{
				deep: true,
				handler:function () {
					this.istyle=JSON.stringify(this.kw.istyle)
				}
			},
		},
		computed:{
			meta:function () {
				return {
					//kw:this.kw,
					row:this.kw.istyle,
					heads:[{name:'width',type:'text',label:'宽度'},
							{name:'height',type:'text',label:'高度'},
							{name:'backgroundColor',type:'color',label:'背景'}],
					errors:{}
				}
			}
		}
		//computed: {
		//	istyle:{
		//		get:function () {
		//			return JSON.stringify(this.kw.istyle);
		//		},
		//		set:function (v) {
		//			var obj =JSON.parse(v)
		//			update_vue_obj(this.kw,obj)
		//		}
		//	}
		//}
	})
</script>

<template id='com-contain'>
	<div :style='kw.istyle' class='com-contain' @click.stop='focus()'>
		<!--<div @click='edit()'>edit</div>-->
		<component :is="child.temp" v-for='child in kw.childs' :kw.sync='child' track-by='$index'></component>
	</div>
</template>

<template id='edit-contain'>
	<div>
		<textarea rows="3" cols="20" v-model='istyle'/>
		</textarea>
		<div class="form-horizontal">
			<field name='width' :kw.sync='meta'></field>
			<field name='height' :kw.sync='meta'></field>
			<field name='backgroundColor' :kw.sync='meta'></field>
		</div>
	</div>
</template>


<script type="text/javascript">
	temp_meta['com-table']={
		kw:{
			heads:[{name:'name',label:'name'},
				{name:'age',label:'Age'}],
			rows:[{name:'heyulin',age:'18'}],
			temp:'com-table',
			edit_temp:'edit-table',
			toggle:false,
		},
		justify:function (kw) {
			Vue.set(kw,'toggle',true)
			return kw
		}
		
	}
	Vue.component('comTable',{
		template:'#com-table',
		mixins:[common]
		//props:['kw'],
		//watch:{
		//	'kw.click':function () {
		//		this.$dispatch('edit',this)
		//	}
		//},
		})
	Vue.component('editTable',{
		template:'#edit-table',
		props:['kw'],
		data:function() {
			return {
				model:JSON.stringify(this.kw)
			}
		},
		
		methods:{
			//model:function () {
			//	return JSON.stringify(this.kw);
			//}
			save:function () {
				var obj =JSON.parse(this.model)
				update_vue_obj(this.kw,obj)
			}
		}
	})
</script>


<template id='com-table'>
	<table>
		<tr><th v-for="head in kw.heads"><span v-text='head.label'></span></th></tr>
		<tr v-for='row in kw.rows'><td v-for='head in kw.heads'><span v-text='row[head.name]'></span></td></tr>
		
	</table>
</template>

<template id='edit-table'>
	<div>
		<textarea rows="3" cols="20" v-model='model'/>
		</textarea>
	</div>
</template>